<template>
    <el-scrollbar class="scroll-bar">

        <el-menu
          default-active="2"
          active-text-color="#fff"
          background-color="#304156"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          :defaultActive="activeMenu"
          router
        >

          <div class="logo-wrapper">
            <img src="@/assets/home-logo.png" alt="" class="home-logo" v-if="!isCollapse">
            <img src="@/assets/logo.png" alt="" class="logo" v-else>
          </div>

          <el-menu-item index="/">
            <el-icon><home-filled /></el-icon>
            <template #title>首页</template>
          </el-menu-item>

          <!-- 商品配置 -->
          <el-sub-menu index="1">
            <template #title>
              <el-icon><goods /></el-icon>
              <span>商品配置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/carousel">轮播图配置</el-menu-item>
              <el-menu-item index="/hot-sell">热销商品配置</el-menu-item>
              <el-menu-item index="/new-product">新品上线配置</el-menu-item>
              <el-menu-item index="/recommend">为你推荐配置</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <!-- 模块管理 -->
          <el-sub-menu index="2">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>模块管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/classify">分类管理</el-menu-item>
              <el-menu-item index="/goods">商品管理</el-menu-item>
              <el-menu-item index="/member">会员管理</el-menu-item>
              <el-menu-item index="/order">订单管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <!-- 系统管理 -->
          <el-sub-menu index="3">
            <template #title>
              <el-icon><setting /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/person">个人信息</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

        </el-menu>
    </el-scrollbar>
</template>

<script setup lang='ts'>
import { computed, ref,Ref,watch } from 'vue'
import {useRoute} from 'vue-router'
import useStore from '@/store/menu'
import {
  HomeFilled,
  Goods,
  Menu as iconMenu,
  Setting
} from '@element-plus/icons-vue'

const store = useStore();
const activeMenu:Ref<string> = ref('/');

const isCollapse = computed(() => store.showMenu);

const route = useRoute();

watch(() => route, (to) => {
  activeMenu.value = to.fullPath; 
},{
  immediate: true,
  deep: true
})
</script>

<style lang="scss" scoped>
.scroll-bar {
  min-height: 100%;
}

.el-menu-vertical-demo {
  height: 100%;
  &:not(.el-menu--collapse) {
    width: 250px;
  }
}

.logo-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;

  .home-logo {
    width: 100%;
    border-radius: 4px;
  }

  .logo {
    width: 30px;
  }
}

:deep(.el-scrollbar__view)  {
  height: 100%;
}

:deep(.el-sub-menu__title),
:deep(.el-menu-item) {
  color: rgba(255,255,255,.7);
}

:deep(.el-menu-item:hover) {

  background-color: #001528;

  &::before {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 4px;
    height: 100%;
    background-color: var(--el-color-primary);
    animation: myfirst .2s;
  }
}

:deep(.el-menu-item.is-active) {
  background-color: #001528;
}

:deep(.el-menu-item-group) {
  background-color: #263445;
}

:deep(.el-menu-item-group__title) {
  padding: 0;
}

:deep(.el-menu-item-group>ul) {
  overflow: hidden;
}

@keyframes myfirst
{
    from {height: 0px;}
    to {height: 100%;}
}

</style>